<template>
  <!-- 批量配置中的人员配置弹框 -->
  <el-dialog title="人员配置" append-to-body :visible.sync="visible" @open="handleOpen" @close="handleClose" top="5vh">
    <avue-crud
      ref="crud"
      :table-loading="loading"
      :option="option"
      :data="data"
      :page.sync="page"
      :search.sync="search"
      @on-load="handleOnLoad"
      @selection-change="handleSelectionChange"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
    </avue-crud>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="onClose"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
      <el-button type="primary" size="small" @click="handleSubmit"><i class="el-icon-circle-plus-outline"></i><span>提 交</span></el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/router/axios';

const fetchUserList = (current, size, params) => {
  return request({
    url: '/api/blade-system/user/page',
    method: 'get',
    params: {
      ...params,
      current,
      size
    }
  });
};
const USER_FIELD = {
  // 人员信息
  USER_ID: 'id', // 用户ID
  USER_NAME: 'realName', // 用户名称
  USER_CODE: 'code', // 用户编码
  ACCOUNT_NAME: 'account', // 账号名
  DEPARTMENT: 'deptName' // 所属部门
};

const AVUE_CRUD_OPTION = {
  height: 'calc(100vh - 480px)',
  calcHeight: 30,
  border: true, //表格外框线是否显示
  stripe: true, //表格是否显示条纹
  header: false, //表格头部是否显示
  index: true, //表格数据序号
  indexLabel: '序号',
  page: true, //表格分页是否显示
  noPageParams: false, // true时不分页时不传参total和pageSize
  addBtn: false, //新增按钮是否显示
  menu: false, //表格操作栏是否显示
  refreshBtn: false, //刷新按钮是否显示
  columnBtn: false, //控制表格列是否显示按钮是否显示
  // searchBtn: false
  searchMenuSpan: 6, //搜索按钮所占宽度
  searchMenuPosition: 'right', //搜索按钮位置
  column: [], //表格列配置
  selection: true, //表格是否多选
  reserveSelection: false, //表格是否分页多选
  rowKey: 'id',
  searchShow: true,
  isFilter: false, //是否对数据进行过滤
  query: {},
  column: [
    { label: '用户名称', prop: USER_FIELD.USER_NAME, search: true },
    { label: '用户编码', prop: USER_FIELD.USER_CODE },
    { label: '账号名', prop: USER_FIELD.ACCOUNT_NAME },
    { label: '所属部门', prop: USER_FIELD.DEPARTMENT }
  ]
};
export default {
  props: ['visible', 'onClose'],
  name: 'BatchPersonConfigModal',
  data() {
    return {
      data: [],
      search: { [USER_FIELD.USER_NAME]: '' },
      loading: false,
      option: AVUE_CRUD_OPTION,
      page: { pageSize: 20, currentPage: 1, total: 0 },
      selection: [] //表格选中行数据
    };
  },
  methods: {
    handleOpen() {
      this.handleOnLoad(this.page);
    },
    handleClose() {
      this.reset();
      this.onClose();
    },
    handleOnLoad(page, params = {}) {
      if (this.loading) return;
      this.loading = true;
      fetchUserList(page.currentPage, page.pageSize, params).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.clearSelection();
      });
    },
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.handleOnLoad(this.page, params);
      done();
    },
    searchReset() {
      this.handleOnLoad(this.page);
    },
    handleSubmit() {
      if (this.selection.length === 0) {
        this.$message.warning('请选择人员');
        return;
      }
      this.$emit('on-submit', this.selection);
      this.clearSelection();
    },
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    clearSelection() {
      this.$refs.crud.toggleSelection();
      this.selection = [];
    },
    reset() {
      this.loading = false;
      this.page.total = 0;
      this.page.currentPage = 1;
      this.page.pageSize = 15;
      this.option.query = {};
      this.data = [];
      this.search = { [USER_FIELD.USER_NAME]: '' };
    }
  }
};
</script>

<style lang="scss" scoped></style>
